//程序入口
window.main = function ($) {
    var loadingCircleBuilder = function (config) {
        var loadingInstanceId = 1;
        var defaultConfig = {
            rootDom: $("body"),
            selector: ".loading-circle",
            /**外圆圆直径，单位 px，数值只能是偶数，否则样式显示会有问题 */
            diameter: 100,
            /** 圆环进度颜色值 */
            ringProgressColor: "pink",
            /** 圆环颜色值 */
            ringColor: "green",
            /** 圆环宽度，数值只能是偶数，否则样式显示会有问题 */
            ringWidth: 10,
            /** 内部圆颜色值 */
            innerCircleColor: "#ffffff",
        };
        var LoadingCircle = function (config) {
            this.config = $.extend({}, defaultConfig, config);
            this.rootDom = this.config.rootDom;
            this.children = [];
        };

        /**
         * 初始化实例
         */
        LoadingCircle.prototype.init = function () {
            var rootDom = this.config.rootDom;
            var selector = this.config.selector;
            var diameter = this.config.diameter;
            var innerCircleColor = this.config.innerCircleColor;
            var ringWidth = this.config.ringWidth;
            var ringColor = this.config.ringColor;
            var ringProgressColor = this.config.ringProgressColor;
            this.children = rootDom.find(selector);
            if (this.children.length === 0) {
                throw Error("not found element by selector:" + selector);
            }
            if (ringWidth > diameter) {
                throw Error("the ring widht can not be great than diameter");
            }
            $(this.children).each(function (index, item) {
                var domHtml =
                    '<div class="loading-circle-instance">' +
                    '<div class="part-left"></div>' +
                    '<div class="part-right"></div>' +
                    '<div class="part-left2"></div>' +
                    '<div class="part-right2"></div>' +
                    '<div class="part-content"></div>' +
                    "</div>";
                var $domHtml = $(domHtml);
                //设置整体宽高
                $domHtml.css({
                    width: diameter + "px",
                    height: diameter + "px",
                    position: "relative",
                });
                //设置底色
                $domHtml.find(".part-content").css({
                    "background-color": innerCircleColor,
                    width: diameter - ringWidth * 2 + "px",
                    height: diameter - ringWidth * 2 + "px",
                    left: ringWidth + "px",
                    top: ringWidth + "px",
                    "z-index": 5,
                    position: "absolute",
                    "border-radius": "50%",
                });

                //设置左半边底层元素
                $domHtml.find(".part-left").css({
                    position: "absolute",
                    width: diameter / 2 + "px",
                    height: diameter + "px",
                    "border-radius": diameter + "px 0px 0px " + diameter + "px",
                    "z-index": 1,
                    "background-color": ringProgressColor,
                });

                // 设置右半边底层元素;
                $domHtml.find(".part-right").css({
                    left: diameter / 2 + "px",
                    position: "absolute",
                    width: diameter / 2 + "px",
                    height: diameter + "px",
                    "border-radius":
                        "0px " + diameter + "px " + diameter + "px 0px",
                    "z-index": 3,
                    "background-color": ringProgressColor,
                });

                //设置左半边遮罩元素
                $domHtml.find(".part-left2").css({
                    position: "absolute",
                    left: "0px",
                    width: diameter / 2 + "px",
                    height: diameter + "px",
                    "border-radius": diameter + "px 0px 0px " + diameter + "px",
                    "z-index": 2,
                    "background-color": ringColor,
                    transform: "rotate(0deg)",
                    "transform-origin":
                        diameter / 2 + "px " + diameter / 2 + "px",
                });

                //设置右半边遮罩元素
                $domHtml.find(".part-right2").css({
                    position: "absolute",
                    left: diameter / 2 + "px",
                    width: diameter / 2 + "px",
                    height: diameter + "px",
                    "border-radius":
                        "0px " + diameter + "px " + diameter + "px 0px",
                    "z-index": 4,
                    "background-color": ringColor,
                    transform: "rotate(0deg)",
                    "transform-origin": "0px " + diameter / 2 + "px",
                });
                $(item).append($domHtml);
            });
            return this;
        };
        /**
         * 设置实例角度值
         * @param {number} radius 角度值 0-360
         * @param {*} child jqueryObject,如果有多个子节点，可以给特定子节点设置角度，
         * 否则是给所有子节点统一赋值
         */
        LoadingCircle.prototype.setRadius = function (radius, child) {
            if (radius < 0 || radius > 360) {
                throw new Error("radius out of range");
            }
            if (child === null || child === undefined) {
                child = this.children;
            }
            if (radius >= 0 && radius <= 180) {
                child.find(".part-right2").css({
                    transform: "rotate(" + radius + "deg)",
                    display: "block",
                });
                child.find(".part-left2").css({
                    transform: "rotate(0deg)",
                    display: "block",
                });
            } else {
                //隐藏右半圆
                child.find(".part-right2").css({
                    transform: "rotate(0deg)",
                    display: "none",
                });
                radius = radius - 180;
                child.find(".part-left2").css({
                    transform: "rotate(" + radius + "deg)",
                    display: "block",
                });
            }
        };
        /**
         * 显示加载圆圈
         * @param {*} child jqueryObject,如果有多个子节点，可以给特定子节点设置角度，
         * 否则是给所有子节点统一赋值
         */
         LoadingCircle.prototype.show = function (child) {
            if (child === null || child === undefined) {
                child = this.children;
            }
            child.show();
        };
        /**
         * 隐藏加载圆圈
         * @param {*} child jqueryObject,如果有多个子节点，可以给特定子节点设置角度，
         * 否则是给所有子节点统一赋值
         */
         LoadingCircle.prototype.hide = function (child) {
            if (child === null || child === undefined) {
                child = this.children;
            }
            child.hide();
        };
        return function (config) {
            return new LoadingCircle(config);
        };
    };

    var newLoadingCircle = loadingCircleBuilder();
    var root = $("#root");
    var loadingCircles = newLoadingCircle({
        rootDom: root,
        selector: ".loading-circle",
        /**外圆圆直径，单位 px，数值只能是偶数，否则样式显示会有问题 */
        diameter: 100,
        /** 圆环进度颜色值 */
        ringProgressColor: "#66ccff",
        /** 圆环颜色值 */
        ringColor: "gray",
        /** 圆环宽度，数值只能是偶数，否则样式显示会有问题 */
        ringWidth: 10,
        /** 内部圆颜色值 */
        innerCircleColor: "#fff",
    }).init();
    window.loadingCircles = loadingCircles;
    var i = 0;
    setInterval(() => {
        i = i % 360;
        loadingCircles.setRadius(i++);
    }, 10);
};
